<template>
	<view v-if="menu.show" class="fixed-menu" :style="{left: menu.left + 'px',top: menu.top + 'px'}" @click="close">
		<view class="mask" @click="close"></view>
		<slot></slot>
	</view>
</template>
<script setup>
	import { nextTick, reactive, ref, getCurrentInstance } from 'vue';
	const { ctx } = getCurrentInstance();
	const menu = reactive({
		show: false,
		left: 0,
		top: 0,
		height: 0
	})

	function show(left, top) {
		menu.show = true;
		menu.left = left;
		menu.top = top;
	}

	function close() {
		menu.show = false;
	}
	defineExpose({
		show
	})
</script>
<style scoped lang="scss">
	.fixed-menu {
		position: fixed;
		left: 0;
		z-index: 999;
		border-radius: 8px;
		border: 1px solid rgb(49, 52, 63);
		background: rgb(31, 33, 40);
		box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 32px -4px;
		width: 224px;
		padding: 4px;
		transition: all 2s;
		overflow: hidden;
	}
	.mask {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: transparent;
	}
</style>